<script setup lang="ts">
import { computed, ref } from "vue";
import { useNowTime } from "@/hooks/useNowTime";
import MapArea from "./components/MapArea.vue";
import Section1 from "./components/Section1.vue";
import Section2 from "./components/Section2.vue";
import Section3 from "./components/Section3.vue";
import Section4 from "./components/Section4.vue";
import Section5 from "./components/Section5.vue";
import Section6 from "./components/Section6.vue";
import { datetimeFormat } from "@/utils/date";

const nowTime = useNowTime();
const innerWidth = ref(0);
const innerHeight = ref(0);
const weekIndayV2 = computed(() => {
    const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    return weekDays[new Date(nowTime.nowTime.value).getDay()];
});
function resize() {
    innerWidth.value = window.innerWidth;
    innerHeight.value = window.innerHeight;
}
resize();
// 调整窗口大小时
let timer = null as NodeJS.Timeout | null;
window.addEventListener("resize", () => {
    timer && clearTimeout(timer);
    timer = setTimeout(resize, 200);
});
</script>

<template>
    <div class="index" :style="{ transform: 'scale(' + innerWidth / 1920 + ', ' + innerHeight / 1080 + ')' }">
        <div class="light"></div>
        <header>
            <time class="left">
                <b>{{ datetimeFormat(nowTime.nowTime.value, "h:m") }}</b>
                <span>{{ datetimeFormat(nowTime.nowTime.value, "Y.M.D") }}</span>
            </time>
            <h1>智慧农业可视化大屏</h1>
            <time class="right">
                <p>26-32℃ 晴 {{ weekIndayV2 }}</p>
            </time>
        </header>
        <main>
            <MapArea />
        </main>
        <Section1 class="section1" />
        <Section2 class="section2" />
        <Section3 class="section3" />
        <Section4 class="section4" />
        <Section5 class="section5" />
        <Section6 class="section6" />
    </div>
</template>

<style scoped lang="scss">
@use "@/styles/vars" as *;
.index {
    position: relative;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 50%, #d5e2ec 0%, #a1c7e9 100%);
    .light {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 300px;
        height: 300px;
        background-color: #d5e2ec;
        box-shadow: 0 0 50px 50px #d5e2ec;
        border-radius: 50%;
        transform: translate(50%, -50%);
    }
    header {
        position: relative;
        box-sizing: border-box;
        padding: 0 30px;
        width: 100%;
        height: 80px;
        text-align: center;
        background: url("@/assets/images/header.png") 0 0 / 100% 100%;
        display: flex;
        align-items: center;
        h1 {
            margin-top: -20px;
            flex: 1;
            color: #e3ffff;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 0 3px 3px #2b658a;
        }
        time {
            display: flex;
            align-items: flex-end;
            column-gap: 10px;
            b {
                color: #5d92ca;
                font-size: 22px;
                font-weight: bold;
            }
            span {
                color: #4c6b87;
                font-size: 14px;
                font-weight: bold;
            }
            p {
                color: #47657f;
                font-size: 16px;
            }
        }
    }
    main {
        flex: 1;
        display: flex;
    }
    .section1 {
        left: 30px;
        top: 100px;
    }
    .section2 {
        left: 30px;
        top: 424px;
    }
    .section3 {
        left: 30px;
        top: 748px;
    }
    .section4 {
        left: 1466px;
        top: 100px;
    }
    .section5 {
        left: 1466px;
        top: 424px;
    }
    .section6 {
        left: 1466px;
        top: 748px;
    }
}
</style>
